<template>
  <div class="login-page flex items-center justify-center">
    <Logo
      logoSize="48px"
      titleSize="24px"
      subSize="14px"
      class="absolute top-58px left-80px"
    />
    <Login v-if="type === 'login'" />
    <Register v-else-if="type === 'register'" />
    <FindPwd v-else />
  </div>
</template>

<script setup>
import { Logo } from "@/components";
import { Login, Register, FindPwd } from "./components";

const type = ref("login");
const changeType = (loginType) => {
  type.value = loginType;
};

provide("changeType", changeType);
</script>

<style lang="less" scoped>
.login-page {
  position: relative;
  width: 100vw;
  min-height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
  mix-blend-mode: multiply;
  background: #f8f9fe;
  &::before {
    content: "";
    position: absolute;
    z-index: -1;
    width: 100%;
    height: 100%;
    background: url("/login-bg.png") no-repeat center;
    background-size: cover;
  }
}
</style>
